<template>
  <div class="box-body box-primary">
    <div class="box-body box-primary">
      <div class="box-body">
        <div class=" form-inline dt-bootstrap" id="accountsForm">
          <div class="row">
            <div class="col-sm-12 table-responsive">
              <table class="table table-hover table table-bordered table-striped dataTable">
                <tbody>
                  <tr>
                    <th aria-label="id" style="display:none" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting"></th>
                    <th aria-label="账号" style="width: 142px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">账号</th>
                    <th aria-label="员工名称" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">员工名称</th>
                    <th aria-label="账号角色" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">角色</th>
                    <th aria-label="角色状态" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">角色状态</th>
                    <th aria-label="最后一次登陆时间" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">最后一次登陆时间</th>
                    <th aria-label="操作" style="width: 90px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">操作</th>
                  </tr>
                  <tr v-for='(value,key) in this.accounts' role="row" class="value.cls">
                    <td style="display:none"> {{ value.id }}</td>
                    <td> {{ value.userName }}</td>
                    <td>{{ value.employeeName }}</td>
                    <td class="text-light" v-text="getRoleName(value.role)"></td>
                    <td class="text-light" v-text="getRoleStatusName(value.status)"></td>
                    <td>{{ value.lastLoginTime }}</td>
                    <td>
                      <button type="button" class="btn btn-primary ">
                        <i class="fa fa-eye">查看</i>
                      </button>
                      <button type="button" class="btn btn-success">
                        <i class="fa fa-edit">编辑</i>
                      </button>
                      <button type="button" class="btn btn btn-warning">
                        <i class="fa fa-trash">删除</i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Utils from "../../../common/utils"
let util = new Utils()
export default {
  "name": "accountList",
  props: ["editAccounts"],
  data: function() {
    return {
      accounts: [],
      roles: []
    }
  },
  created: function() {

  },
  mounted: function() {
    this.accounts = this.editAccounts
    this.loadRoles()
  },
  methods: {
    getAccounts: function() {
      return this.accounts
    },
    getRoleStatusName: function(status) {
      if (status == 0) {
        return "正常"
      }
      else if (status == 1) {
        return "禁用"
      }
      else if (status == 2) {
        return "锁定"
      }
    },
    getRoleName: function(roleId) {
      for (var index in this.roles) {
        if (this.roles[index].id == roleId) {
          return this.roles[index].name
        }
      }
      return ""
    },
    loadRoles: function() {
      // todo load roles
      this.$http.get('/data/roles.json')
        .then(response => {
          let roles = JSON.parse(response.bodyText).roles
          this.roles = roles
        }, response => {
          console.log('failed:' + response.data)
        })
    }
  }
}
</script>
